<template>
	<view style="padding-bottom: 130rpx;">
		<view class="formContainer">
			<uni-forms ref="form">
				<uni-forms-item label="借调同行" required>
					<view @click="showPeer=true">
						<u--input v-model="formData.sameJobName" placeholder="请选择借调同行" disabled disabledColor="#fff"
							suffixIcon="arrow-right"></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="车牌号" required>
					<view @click.stop="showCarKeyboard=!showCarKeyboard">
						<u--input v-model="formData.carNo" placeholder="请输入车牌号" disabled disabledColor="#fff" maxlength="7"></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="车型" required>
					<view>
						<u--input  v-model="carInfo" placeholder="自动获取品牌/车系/车型" disabled></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="车架号">
					<view>
						<u--input v-model="formData.vinNo" placeholder="请输入车架号"></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="借调时间" required>
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至"
						@change="timeChange" />
				</uni-forms-item>

				<uni-forms-item label="借调天数">
					<view>
						<u--input v-model="formData.estimateDay" placeholder="根据借调时间计算" disabled disabledColor="#fff"></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="借调费用" required>
					<view>
						<u--input v-model="formData.totalRent" type="number" placeholder="请输入借调费用"></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="结算方式" required>
					<view @click="showSettlementType = true">
						<u--input v-model="formData.settlementTypeStr" placeholder="请选择结算方式" disabled
							disabledColor="#fff" suffixIcon="arrow-right"></u--input>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="车辆初始化照片" labelPosition="top" labelWidth="300">
					<sr-upload maxCount="20" @uploadResult="uploadCar"></sr-upload>
				</uni-forms-item>

				<uni-forms-item label="备注" labelPosition="top">
					<view>
						<u--textarea v-model="formData.remark" placeholder="请输入200字以内的内容" count maxlength="200">
						</u--textarea>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<button type="info" class="sub-btn" @click="confimCar">确认</button>
        
		<!-- 车牌号键盘 -->
		<u-keyboard ref="uKeyboard" mode="car" :show="showCarKeyboard" @change="keyboardChange" @backspace="backspace"
			@cancel="showCarKeyboard=false" @confirm="showCarKeyboard=false"></u-keyboard>
		<!-- 借调同行 -->
		<u-picker :show="showPeer" :columns="list1" keyName="name" closeOnClickOverlay @close="showPeer = false"
			@cancel="showPeer = false" title="请选择借入同行" confirmColor="#1573FF" @confirm="confimPeer"></u-picker>
		<!-- 结算方式 -->
		<u-picker :show="showSettlementType" :columns="list2" keyName="name" closeOnClickOverlay
			@close="showSettlementType = false" @cancel="showSettlementType = false" title="请选择结算方式"
			confirmColor="#1573FF" @confirm="confimSettlementType"></u-picker>
	</view>
</template>

<script>
	import * as orderApi from '@/api/order-api.js';
	import srUpload from '@/components/upload/sr-upload.vue'
	var moment = require('@/utils/moment.js');
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				showCarKeyboard : false,
				showPeer: false,
				showSettlementType: false,
				carInfo : '',
				formData: {
					sameJobName: '',
					sameJobId: '',
					carNo : '',
					orderNo : '',
					secondedType : 1,
					startTime: '',
					estimateEndTime: '',
					estimateDay : '',
					totalRent : '',
					remark: '',
					settlementWay: '',
					settlementTypeStr: '',
					initialPicture : [],
				},
				list1: [],
				list2: [
					[{
							name: '借调结束结算',
							id: '1'
						},
						{
							name: '月末结算',
							id: '2'
						},
						{
							name: '借调前结算',
							id: '3'
						}
					]
				]
			};
		},
		computed: {
			datetimerange() {
				return [this.formData.startTime, this.formData.estimateEndTime];
			}
		},
		onLoad(op) {
			const orderInfo = JSON.parse(decodeURIComponent(op.orderInfo));
			this.formData.orderNo = orderInfo.orderNo;
			this.formData.startTime = orderInfo.rentalStartTime+":00";
			this.formData.estimateEndTime = orderInfo.rentalEndTime+":00";
			var m1 = moment(this.formData.startTime);
			var m2 = moment(this.formData.estimateEndTime);
			this.formData.estimateDay= m2.diff(m1, 'days');
			this.carInfo = orderInfo.modelName;
			this.getSecondedList();
		},
		methods: {
			getSecondedList() {
				var param = {
					pageNum: 1,
					pageSize:1000,
				};
				 uni.showLoading({
				 	title:'加载中'
				 })
                 orderApi.secondedList(this.toParams(param)).then(res=>{
					 uni.hideLoading();
					 this.list1 = [res.rows];
				 }).catch(error=>{
					 uni.hideLoading();
				 })
			},

			// 租赁时间发生改变
			timeChange(e) {
				if(e.length == 1) {
					this.$u.toast('请选择结束时间');
					return
				}
				this.formData.startTime = e[0];
				this.formData.estimateEndTime = e[1];
				var m1 = moment(this.formData.startTime);
				var m2 = moment(this.formData.estimateEndTime);
				this.formData.estimateDay= m2.diff(m1, 'days');
				console.log(this.formData.estimateDay);
				
			},
			// 选择同行
			confimPeer(e) {
				this.formData.sameJobId = e.value[0].id;
				this.formData.sameJobName = e.value[0].name;
				this.showPeer = false;
			},
			// 选择结算方式
			confimSettlementType(e) {
				this.formData.settlementWay = e.value[0].id;
				this.formData.settlementTypeStr = e.value[0].name;
				this.showSettlementType = false;
			},
			//监听车牌号键盘改变
			keyboardChange(val) {
				this.formData.carNo += val;
			},
			//车牌号删除
			backspace() {
				if (this.formData.carNo) this.formData.carNo = this.formData.carNo.substr(0, this.formData.carNo.length -
					1);
			},
			// 上传车辆初始化图片
			uploadCar(data) {
				this.formData.initialPicture = data;
			},
			// 确认
			confimCar() {
				
				if(uni.$u.test.isEmpty(this.formData.sameJobId)) {
					uni.$u.toast('请选择借调同行');
					return
				}else if(uni.$u.test.isEmpty(this.formData.carNo)) {
					uni.$u.toast('请输入车牌号');
					return
				}else if(uni.$u.test.isEmpty(this.formData.totalRent)) {
					uni.$u.toast('请输入借调费用');
					return
				}else if(uni.$u.test.isEmpty(this.formData.settlementWay)) {
					uni.$u.toast('请选择结算方式');
					return
				}else {
					orderApi.seconded(this.formData).then(res=>{
						uni.$emit("refreshOrder");
						this.$u.toast('借调成功')
						uni.navigateBack({
							animationDuration: 300,
							delta:2
						})
					})
				}
				
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 40rpx 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>
